<template>
    <div class="container bg">
        <div class="navs">
            <div class="pric" @click="goBlack"></div>
            <div class="title">购买确认</div>
        </div>

        <div class="yesbuy">
            <div class="left"><img :src="NumData.imgs" alt=""></div>
            <div class="right">
                <div class="title">{{ NumData.title }}</div>
                <div class="where">{{ NumData.keyWordQ }}</div>
                <div class="fahuo">
                    <p>平台发货</p>
                    <p>保险赠送</p>
                    <p>已实名</p>
                </div>
            </div>
            <div class="pricecs">￥{{ NumData.price }}</div>
        </div>

        <div class="phoneNum">
            <p>手机号码:</p><input type="text" placeholder="请输入" v-model="phoneNum">
        </div>

        <van-divider>猜你喜欢</van-divider>

        <div class="getList">
            <ul class="ul">
                <li v-for="(item, index) in listData" :key="index">
                    <div class="lefta">
                        <div class="img">
                            <img ref="img" @click="imgs(index)" :src="item.imgs" alt="">
                            <div class="floats">1/1</div>
                        </div>

                    </div>

                    <div class="right" @click="next(item.id)">
                        <div class="title">{{ item.title }}</div>
                        <div class="symb">{{ item.operatorName }}/{{ item.gameServerName }}</div>
                        <div class="price"><span>￥</span>{{ item.price }}</div>
                    </div>
                </li>
            </ul>
        </div>




        <!-- bottom -->
        <div class="bottomcom">
            <p>合计<span>￥{{ NumData.price }}</span></p>
            <button @click="gopay">确认购买</button>
        </div>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { getlistData } from "../assets/api/home.js";
export default {
    data() {
        return {
            listData: null,
            NumData: null,
            phoneNum:"",
        };
    },
    methods: {
        goBlack() {
            this.$router.go(-1)
        },
        getlistDataFun() {
            getlistData().then((data) => {
                this.listData = data.data.Data.hits
                console.log(this.listData);
            })
        },
        //点击图片放大预览
        imgs(id) {
            console.log(this.$refs.img[id].currentSrc);
            ImagePreview({
                // currentSrc
                images: [
                    this.$refs.img[id].currentSrc
                ],
                closeable: true,
                closeIconPosition: 'top-left',
            });
        },
        next(id) {
            // let {keyWordQ,imgs,title,operatorName,price} =this.listData;
            var obj = this.listData.find((obj) => obj.id === id);
            if (obj == -1) {
                console.log("errey");
            } else {
                window.localStorage.setItem("obj", JSON.stringify(obj))
            }
            this.$router.push('/trade')
        },
        gopay() {
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg.test(this.phoneNum)) {
                this.$toast("手机号码有误!")
                return;
            } else {
                this.$router.push({
                    path: "/pay",
                    query: {
                        NumData: this.NumData,
                        num: 2
                    }
                })
            }

        }
    },
    created() {
        this.getlistDataFun()
        this.NumData = this.$route.query.listData
        console.log(this.NumData);
    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.bg {
    background-color: #f1f1f1;
    height: 100%;
}

.navs {
    height: 47px;
    line-height: 47px;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;

    .pric {
        width: 37px;
        height: 100%;
        background: url(../assets/img/left.png)no-repeat center center;
        background-size: 30%;
    }

    .title {
        flex: 1;
        text-align: center;
        font-size: 16px;
        color: #0b1c35;
    }
}

.yesbuy {
    width: 351px;
    height: 130px;
    background-color: #fff;
    margin: 11px auto 0 auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        width: 150px;
        height: 70px;
        padding-left: 8px;

        img {
            border-radius: 8px;
            height: 100%;
        }
    }

    .right {
        padding-left: 11px;
        height: 80px;

        .title {
            font-size: 14px;
            width: 170px;
            color: #3d2b1b;
        }

        .where {
            width: 170px;
            font-size: 12px;
            color: #838385;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .fahuo {
            display: flex;
            font-size: 11px;
            margin-top: 5px;
            color: #ff7729;

            &>p {
                margin-left: 5px;
                background: rgba(255, 102, 0, 0.3);
                text-align: center;
                height: 17px;
                line-height: 17px;
            }
        }
    }

    .pricecs {
        padding-left: 12px;
        width: 170px;
        color: #ff7729;
        text-align: center;
    }
}

.phoneNum {
    background-color: #fff;
    width: 351px;
    height: 56px;
    line-height: 56px;
    margin: 12px auto 0 auto;
    display: flex;
    border-radius: 8px;

    p {
        margin-left: 12px;
        font-size: 14px;
        color: #333637;
    }

    input {
        padding-left: 14px;
        width: 70%;
        height: 100%;
        border: none;
        border-radius: 8px;
    }
}

.bottomcom {
    height: 54px;
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
        color: #0d0a09;
        font-display: 13px;
        padding-left: 12px;

        span {
            font-size: 20px;
            color: #ff7729;
        }
    }

    button {
        margin-right: 12px;
        width: 121px;
        height: 40px;
        border-radius: 61px;
        border: none;
        background-color: #ff7729;
        color: #fff;
    }
}

.getList {
    background-color: #f1f1f1;

    .ul {
        li {
            display: flex;
            background-color: #fff;
            margin-top: 10px;

            .lefta {
                width: 97px;
                height: 140px;

                padding: 14px 14px 12px 14px;

                .img {
                    width: 97px;
                    height: 97px;
                    position: relative;
                    border: 1px solid #d2d2d2;

                    img {
                        height: 100%;
                    }
                }

                .floats {
                    position: absolute;
                    bottom: 5px;
                    right: 6px;
                    width: 40px;
                    height: 26px;
                    color: #fff;
                    font-size: 10px;
                    font-weight: 500;
                    line-height: 26px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, 0.5);
                }
            }

            .right {
                padding: 14px 14px 12px 14px;

                .title {
                    color: #0e0206;
                    font-size: 18px;
                    font-weight: 700;
                }

                .symb {
                    margin-top: 5px;
                    font-size: 13px;
                    height: 16px;
                    line-height: 16px;
                    color: #808080;
                }

                .price {
                    color: #ff7729;
                    font-size: 16px;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>